<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/mystore.css">
    <title>Mypetstore</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../js/mainAutoshow.js"></script>
</head>
<body>
<div th:replace="~{common/top}"></div>

<div id="Welcome">
        <div id="WelcomeContent">
            <!--显示登录用户的name-->
        </div>
    </div>

    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <a href="/catalog/viewCategory?categoryId=FISH"><img src="../images/fish_icon.gif" /></a><br />
                Saltwater, Freshwater <br />
                <a href="/catalog/viewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a><br />
                Various Breeds <br />
                <a href="/catalog/viewCategory?categoryId=CATS"><img src="../images/cats_icon.gif" /></a><br />
                Various Breeds, Exotic Varieties <br />
                <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a><br />
                Lizards, Turtles, Snakes <br />
                <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a><br />
                Exotic Varieties
            </div>
        </div>

        <div id="MainImage">
            <div id="detail_fish" ><ul id="productfish" ></ul></div>
            <div id="detail_dogs" ><ul id="productdogs"></ul></div>
            <div id="detail_reptiles" ><ul id="productreptiles"></ul></div>
            <div id="detail_cats" ><ul id="productcats"></ul></div>
            <div id="detail_birds" ><ul id="productbirds"></ul></div>
            <div id="detail_birds_copy" ><ul id="productbirds_copy"></ul></div>
            <div id="MainImageContent">
                <map name="estoremap">
                    <area alt="Birds" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="RECT" id="BIRDS_img"/>
                    <area alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory?categoryId=FISH" shape="RECT" id="FISH"/>
                    <area alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="RECT" id="DOGS"/>
                    <area alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES" shape="RECT" id="REPTILES"/>
                    <area alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="RECT" id="CATS"/>
                    <area alt="Birds" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="RECT" id="BIRDS"/>
                </map>
                <img height="355" src="../images/splash.gif" align="middle"
                     usemap="#estoremap" width="350" /></div>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>
    <!-- 卡片组 -->
    <section class="home-cards">
        <div>
            <img src="../images/petcard1.jpg" alt="">
            <h3>Choosing the Best </h3>
            <p>
                Discover how to make informed decisions in life, from picking the right products to choosing
                the paths that shape your future.
            </p>
            <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>

        </div>
        <div>
            <img src="../images/petcard2.jpg" alt="" />
            <h3>Love Without Limits</h3>
            <p>
                Love knows no boundaries. Embrace the beauty of unconditional relationships and
                find inspiration to nurture deeper connections with those you cherish most.
            </p>
            <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
        </div>
        <div>
            <img src="../images/petcard3.jpg" alt="" />
            <h3>Caring for Your Pet</h3>
            <p>
                Your furry friends deserve the best care. From grooming to nutrition,
                uncover tips and tricks to ensure your pets stay healthy, happy, and full of energy.
            </p>
            <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
        </div>
        <div>
            <img src="../images/petcard4.jpg" alt="" />
            <h3>Endless Love</h3>
            <p>
                True love knows no bounds. Celebrate the beauty of everlasting
                connections that bring joy, comfort, and meaning to life.
            </p>
            <a href="#">Learn more<i class="fa-solid fa-chevron-right"></i></a>
        </div>
    </section>
    <!--Carbon-->
    <section class="carbon dark"><!--可能被两个修饰 .carbon .dark-->
        <div class="content">
            <h2>Choose Pets</h2>
            <p>
                Find the perfect companion to bring joy and love into your life. From playful puppies to cuddly kittens,
                learn how to choose a pet that fits your lifestyle and becomes a cherished member of your family.
            </p>
            <a href="#" class="btn">
                Learn More<i class="fa-solid fa-chevron-right"></i>
            </a>

        </div>
    </section>

<footer th:replace="~{common/bottom}"></footer>
</body>
</html>